import React from 'react';
import { ActionSheet } from 'antd-mobile';
import Tag from '../../common/Tag';

import './index.sass';

// const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
// let wrapProps;
// if (isIPhone) {
//   wrapProps = {
//     onTouchStart: e => e.preventDefault(),
//   };
// }

class ContactInfo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      phones: [{ tel: 13565263565, name: '张三' }, { name: '取消' }]
    };
  }

  showActionSheet = () => {
    const BUTTONS = this.state.phones.map(item => (
      <span>
        <span>{item.name}</span>
        {item.tel && <a href={`tel:${item.tel}`}>{item.tel}</a>}
      </span>
    ));
    ActionSheet.showActionSheetWithOptions(
      {
        options: BUTTONS,
        cancelButtonIndex: BUTTONS.length - 1,
        //   destructiveButtonIndex: BUTTONS.length - 2,
        // title: 'title',
        //   message: 'I am description, description, description',
        maskClosable: true,
        'data-seed': 'logId'
      },
      buttonIndex => {
        console.log(buttonIndex);
        this.setState({ clicked: BUTTONS[buttonIndex] });
      }
    );
  };

  renderUser() {
    return (
      <div className="contact-info-user-item">
        <div>
          <span className="contact-info-user-item-name">张三</span>
          <Tag title="男" />
          <Tag title="HR" />
          <span className="contact-info-user-item-edit">
            <i className="crmiconfont crmicon-bianji" />
          </span>
        </div>
        <div>
          <span onClick={this.showActionSheet} className="contact-info-user-item-tel">
            15986963698
          </span>
          <span>Xcsdr@163.com</span>
        </div>
      </div>
    );
  }

  render() {
    return (
      <div>
        {this.renderUser()}
        {this.renderUser()}
        {this.renderUser()}
      </div>
    );
  }
}

export default ContactInfo;
